M

MLOG

Čeština

Objevte CSS Container Style Queries – responzivní design, kde se komponenty přizpůsobují stylu kontejneru, ne jen viewportu. Ideální pro globální weby.

CSS Container Style Queries: Responzivní design založený na stylu pro globální aplikace

Tradiční responzivní design se silně opírá o media queries, které přizpůsobují rozložení a styly webové stránky na základě velikosti viewportu. Ačkoliv je tento přístup efektivní, může vést k nekonzistencím a potížím při práci se složitými komponentami, které se musí přizpůsobit různým kontextům v rámci stejného viewportu. CSS Container Style Queries nabízejí granulárnější a intuitivnější řešení, které umožňuje prvkům reagovat na stylování aplikované na jejich nadřazený prvek, což poskytuje skutečně komponentově založené responzivní chování.

Co jsou CSS Container Style Queries?

Container Style Queries rozšiřují sílu container queries za hranice jednoduchých podmínek založených na velikosti. Místo kontroly šířky nebo výšky kontejneru vám umožňují zkontrolovat přítomnost specifických CSS vlastností a hodnot aplikovaných na daný kontejner. To umožňuje komponentám přizpůsobit svůj styl kontextu kontejneru, nikoliv pouze jeho rozměrům.

Představte si to takto: místo abyste se ptali „Je viewport širší než 768px?“, můžete se zeptat „Má tento kontejner nastavenou vlastní vlastnost --theme: dark;?“. To otevírá zcela nový svět možností pro vytváření flexibilních a znovupoužitelných komponent, které se mohou bez problémů přizpůsobit různým tématům, rozložením nebo variantám značky napříč vaším webem nebo aplikací.

Výhody Container Style Queries

Jak používat CSS Container Style Queries

Zde je rozpis, jak implementovat container style queries:

1. Nastavení kontejneru

Nejprve musíte určit prvek jako kontejner. Můžete to udělat pomocí vlastnosti container-type:

.container {
  container-type: inline-size;
}

Hodnota inline-size je nejběžnější a nejužitečnější, protože umožňuje kontejneru dotazovat se na svou inline (horizontální) velikost. Můžete také použít size, která se dotazuje na inline i block velikost. Použití pouze size může mít dopad na výkon, pokud nebudete opatrní.

Alternativně můžete použít container-type: style pro použití kontejneru pouze pro dotazy na styl, nikoli na velikost, nebo container-type: size style pro použití obou. Pro kontrolu názvu kontejneru použijte container-name: my-container a poté na něj cílte pomocí @container my-container (...).

2. Definování dotazů на styl

Nyní můžete použít at-rule @container style() k definování stylů, které se použijí, když je splněna určitá podmínka:

@container style(--theme: dark) {
  .component {
    background-color: #333;
    color: #fff;
  }
}

V tomto příkladu se styly v rámci pravidla @container aplikují na prvek .component pouze v případě, že jeho nadřazený prvek má vlastní vlastnost --theme nastavenou na dark.

3. Aplikování stylů na kontejner

Nakonec musíte na prvek kontejneru aplikovat CSS vlastnosti, které vaše dotazy na styl kontrolují:

<div class="container" style="--theme: dark;">
  <div class="component">This is a component. </div>
</div>

V tomto příkladu bude mít .component tmavé pozadí a bílý text, protože jeho kontejner má styl --theme: dark; aplikovaný přímo v HTML (pro jednoduchost). Nejlepším postupem je aplikovat styly prostřednictvím CSS tříd. Můžete také použít JavaScript k dynamické změně stylů na kontejneru, což spustí aktualizace dotazů na styl.

Praktické příklady pro globální aplikace

1. Komponenty s tématy

Představte si webovou stránku, která podporuje více témat. Můžete použít container style queries k automatickému přizpůsobení stylů komponent na základě aktivního tématu.

/* CSS */
.app-container {
  --theme: light;
}

@container style(--theme: dark) {
  .card {
    background-color: #333;
    color: #fff;
  }
}

@container style(--theme: light) {
  .card {
    background-color: #f0f0f0;
    color: #333;
  }
}

/* HTML */
<div class="app-container" style="--theme: dark;">
  <div class="card">
    <h2>Card Title</h2>
    <p>Card content.</p>
  </div>
</div>

V tomto příkladu se komponenta .card automaticky přepne mezi tmavým a světlým tématem na základě vlastnosti --theme svého kontejneru. To je velmi přínosné pro weby, kde si uživatelé mohou vybrat různá témata podle svých preferencí.

2. Variace rozložení

Můžete použít container style queries k vytvoření různých variant rozložení pro komponenty na základě dostupného prostoru nebo celkového rozložení stránky. Zvažte komponentu pro výběr jazyka. V hlavní navigaci může být kompaktním rozbalovacím seznamem. V patičce by mohla být plným seznamem dostupných jazyků.

/* CSS */
.navigation {
  --layout: compact;
}

.footer {
  --layout: expanded;
}

@container style(--layout: compact) {
  .language-selector {
    /* Styles for compact dropdown */
  }
}

@container style(--layout: expanded) {
  .language-selector {
    /* Styles for full list of languages */
  }
}

/* HTML */
<nav class="navigation" style="--layout: compact;">
  <div class="language-selector">...

<footer class="footer" style="--layout: expanded;">
  <div class="language-selector">...

Tento přístup je cenný pro webové stránky, které se zaměřují na různá uživatelská rozhraní napříč různými zařízeními a platformami. Vezměte v úvahu, že struktury mobilních a desktopových stránek se často výrazně liší, a to může pomoci komponentám přizpůsobit se.

3. Přizpůsobení typu obsahu

Zvažte zpravodajský web se shrnutími článků. Můžete použít container style queries k úpravě prezentace shrnutí na základě toho, zda obsahují obrázek či nikoliv.

/* CSS */
.article-summary {
  --has-image: false;
}

@container style(--has-image: true) {
  .article-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

/* HTML (with image) */
<div class="article-summary" style="--has-image: true;">
  <img src="..." alt="..." />
  <div>...
</div>

/* HTML (without image) */
<div class="article-summary" style="--has-image: false;">
  <div>...
</div>

To umožňuje vizuálně přitažlivější a informativnější prezentaci shrnutí článků, což zlepšuje uživatelský zážitek. Všimněte si, že nastavení vlastnosti `--has-image` přímo v HTML není ideální. Lepším přístupem by bylo použít JavaScript k detekci přítomnosti obrázku a dynamickému přidání nebo odebrání třídy (např. `.has-image`) prvku `.article-summary` a následnému nastavení vlastní vlastnosti `--has-image` v rámci CSS pravidla pro třídu `.has-image`.

4. Lokalizované stylování

Pro mezinárodní webové stránky lze container style queries použít k přizpůsobení stylů na základě jazyka nebo regionu. Například můžete chtít použít různé velikosti písma nebo mezery pro jazyky s delším textem.

/* CSS */
.locale-container {
  --language: en;
}

@container style(--language: ja) {
  .text {
    font-size: 1.1em;
    letter-spacing: 0.05em;
  }
}

@container style(--language: ar) {
  .text {
    direction: rtl;
  }
}

/* HTML */
<div class="locale-container" style="--language: ja;">
  <p class="text">...</p>
</div>

To umožňuje vytvářet lépe přizpůsobené a uživatelsky přívětivější zážitky pro různá jazyková publika. Uvědomte si, že některé jazyky, jako je arabština a hebrejština, se píší zprava doleva a je třeba aplikovat specifické styly. Pro japonštinu a další východoasijské jazyky mohou být zapotřebí jiné mezery a velikost písma pro správné vykreslení znaků.

5. Aspekty přístupnosti

Container style queries mohou také zlepšit přístupnost přizpůsobením stylů komponent na základě preferencí uživatele nebo schopností zařízení. Například můžete zvýšit kontrast komponenty, pokud si uživatel ve svém operačním systému zapnul režim vysokého kontrastu.

/* CSS */
body {
  --high-contrast: false;
}

@media (prefers-contrast: more) {
  body {
    --high-contrast: true;
  }
}

@container style(--high-contrast: true) {
  .component {
    background-color: black;
    color: white;
  }
}

/* HTML */
<div class="component">...

To zajišťuje, že vaše webové stránky jsou použitelné a přístupné pro všechny, bez ohledu na jejich schopnosti. Všimněte si použití media query `@media (prefers-contrast: more)` k detekci režimu vysokého kontrastu na úrovni operačního systému a následného nastavení vlastní vlastnosti `--high-contrast`. To vám umožní spouštět změny stylu pomocí style query na základě systémového nastavení uživatele.

Osvědčené postupy

Podpora v prohlížečích

Container style queries mají vynikající podporu v moderních prohlížečích, včetně Chrome, Firefox, Safari a Edge. Starší prohlížeče však tuto funkci nemusí plně podporovat. Ujistěte se, že používáte feature queries k poskytnutí záložních stylů pro tyto prohlížeče nebo použijte polyfill.

Závěr

CSS Container Style Queries nabízejí výkonný a flexibilní přístup k responzivnímu designu, který vám umožňuje vytvářet skutečně komponentově založené a přizpůsobitelné webové stránky a aplikace. Využitím stylování kontejnerových prvků můžete odemknout novou úroveň kontroly a granularity ve svých návrzích, což vede k lépe udržovatelným, škálovatelným a uživatelsky přívětivějším zážitkům pro globální publikum.

Osvojte si container style queries k vytváření responzivních komponent, které se bezproblémově přizpůsobují různým tématům, rozložením, jazykům a požadavkům na přístupnost, a vytvořte tak skutečně globální webový zážitek.

Zdroje